<template>
  <div class="main-outter">
    <div class="header">
      <div class="header-tab">
        <div
          :class="type === 'IN' ? 'header-tab-item-active header-tab-item' : 'header-tab-item'"
          @click="changeDirectionTab('IN')"
        >
          入方向
        </div>
        <div
          :class="type === 'OUT' ? 'header-tab-item-active header-tab-item' : 'header-tab-item'"
          @click="changeDirectionTab('OUT')"
        >
          出方向
        </div>
      </div>
      <div class="header-button" @click="manageSecurity(null)">设置新的安全规则</div>
    </div>
    <div class="table">
      <a-table
        ref="table"
        :columns="columns"
        :row-key="(record, index) => record.id.toString() + index"
        :data-source="list"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <span class="table_action" @click="manageSecurity(record)">编辑</span>
            <span class="table_action" @click="manageSecurity(record)">删除</span>
          </template>
        </span>
      </a-table>
    </div>
    <div class="btn">
      <a-button class="table-btn" :disabled="deleteBtn" @click="batchOpera('delete')">启动</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SecurityTable',
  props: {
    // 安全策略列表
    list: {
      type: Array,
      default: null
    },
    type: {
      type: String,
      default: 'IN'
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: null
    }
  },
  computed: {
    columns() {
      const columns = [
        {
          title: '授权策略',
          dataIndex: 'strategy',
          key: 'strategy',
          width: '156px',
          scopedSlots: { customRender: 'strategy' },
          customRender: text => {
            let result = ''
            switch (text) {
              case 'ALLOW':
                result = '允许'
                break
              case 'REFUSE':
                result = '拒绝'
                break
            }
            return result
          }
        },
        {
          title: '协议类型',
          dataIndex: 'protocol',
          key: 'protocol',
          scopedSlots: { customRender: 'protocol' },
          width: '125px',
          customRender: text => {
            let result = ''
            switch (text) {
              case 'TCP':
                result = '自定义TCP'
                break
            }
            return result
          }
        },
        {
          title: '端口范围',
          dataIndex: 'port',
          key: 'port',
          scopedSlots: { customRender: 'port' },
          width: '125px'
        },
        {
          title: '授权对象',
          width: '125px',
          key: 'authObject',
          dataIndex: 'authObject'
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description',
          width: '314px',
          scopedSlots: { customRender: 'description' }
        },
        {
          title: '创建时间',
          width: '190px',
          key: 'createTime',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          width: '140px',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
      return columns
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          //异常 重启 过期状态置灰
          //关机状态可进行重启
          //运行状态可进行关机 重启 启动
          this.startBtn = true
          this.stopBtn = true
          this.restartBtn = true
          let stop = false
          let start = false
          let exception = false
          if (selectedRows.length > 0) {
            this.selectData = selectedRows
            for (const i of selectedRows) {
              if (i.status == '1') {
                start = true
              } else if (i.status == '2') {
                //关机状态
                stop = true
              } else {
                exception = true
              }
            }
            if (exception) {
              this.startBtn = true
              this.stopBtn = true
              this.restartBtn = true
            } else {
              if (stop == true && start == false) {
                this.restartBtn = false
              }
              if (stop == false && start == true) {
                this.startBtn = false
                this.stopBtn = false
                this.restartBtn = false
              }
            }
          }
        }
      }
    }
  },
  methods: {
    // Tab切换
    changeDirectionTab(value) {
      this.$emit('changeType', value)
    },
    // 分页
    handleTableChange(pagination) {
      this.$emit('changePagination', pagination)
    },
    // 新建安全策略
    manageSecurity(value) {
      this.$emit('manageSecurity', value)
    },
    batchOpera(tag) {
      if (tag == 'start') {
        this.batchTitle = '批量启动GPU云服务器'
        this.modalBatchTip = '是否要启动如下GPU云服务器？'
        this.operationBatchBtn = '确认启动'
      } else if (tag == 'stop') {
        this.batchTitle = '批量停止GPU云服务器'
        this.modalBatchTip = '是否要停止如下GPU云服务器？'
        this.operationBatchBtn = '确认停止'
      } else {
        this.batchTitle = '批量重启GPU云服务器'
        this.modalBatchTip = '是否要重启如下GPU云服务器？'
        this.operationBatchBtn = '确认重启'
      }
      this.selectList = []
      this.selectData.forEach(item => {
        this.selectList.push({ id: item.id, name: item.name })
      })
      this.visibleBatch = true
    }
  }
}
</script>

<style lang="less" scoped>
.main-outter {
  width: 100%;
  font-size: 14px;
  .header {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #edeff5;
    .header-tab {
      width: 156px;
      display: flex;
      .header-tab-item {
        color: #333333;
        height: 52px;
        line-height: 52px;
        width: 50%;
        text-align: center;
      }
      .header-tab-item:hover {
        color: #000;
        cursor: pointer;
      }
      .header-tab-item-active {
        border-bottom: 3px solid #33b0ed;
      }
    }
    .header-button {
      width: 140px;
      height: 36px;
      background-color: #33b0ed;
      border-radius: 2px;
      align-self: flex-start;
      color: #ffffff;
      line-height: 36px;
      text-align: center;
    }
    .header-button:hover {
      color: #333;
      cursor: pointer;
    }
  }
  .table {
    margin-top: 21px;
    /deep/.ant-checkbox-checked .ant-checkbox-inner {
      background-color: #33b0ed;
      border-color: #33b0ed;
    }
  }
}
</style>
